<template>
  <el-card>
    <Headers :btn-show="true" btn-text="添加分类" @onShowhickness="onShowhickness" />
    <list-table ref="refRefresh" @PageSize="PageSize" />
    <!-- 添加弹层 -->
    <el-dialog v-if="listShow" title="添加分类" :visible.sync="listShow">
      <list-layer :list-show.sync="listShow" />
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      :current-page="data.pagenum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="data.pagesize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import Headers from '@/components/Headers'
import ListLayer from './component/listLayer.vue'
import ListTable from './component/listTable.vue'
export default {
  name: 'FormList',
  components: { Headers, ListLayer, ListTable },
  props: {},
  data() {
    return {
      data: {
        type: 3,
        pagenum: 1,
        pagesize: 10,
        total: null
      },
      types: 'info', // 控制标签显示
      listShow: false
    }
  },
  computed: {}, // 计算属性
  watch: {},
  created() { },
  mounted() {},
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'region1' }, { name: 'region2' }])
      }
      if (node.level > 3) return resolve([])

      var hasChild
      if (node.data.name === 'region1') {
        hasChild = true
      } else if (node.data.name === 'region2') {
        hasChild = false
      } else {
        hasChild = Math.random() > 0.5
      }
      setTimeout(() => {
        var data
        if (hasChild) {
          data = [
            {
              name: 'zone' + this.count++
            },
            {
              name: 'zone' + this.count++
            }
          ]
        } else {
          data = []
        }

        resolve(data)
      }, 500)
    },
    onShowhickness(isShow) {
      this.listShow = isShow
    },
    handleSizeChange(val) {
      this.data.pagesize = val
      this.$refs.refRefresh.categoriesList()
    },
    handleCurrentChange(val) {
      this.data.pagenum = val
      this.$refs.refRefresh.categoriesList()
    },
    PageSize(pagesize) {
      this.data = pagesize || []
    }
  }
}
</script>

<style>
.el-table th {
  background-color: #f8f8f9;
}
</style>
